<template>
  <div>
    <Vheader title="我的订单"></Vheader>
    <div class="play">

      </div>
    <div class="order-tab-wrapper" ref="tabWrapper">
      <div class="order-tab">
        <div class="order-tab-item" @click="show(0)" :class="{ active: isActive == 0}">全部</div>
        <div class="order-tab-item" @click="show(1)" :class="{ active: isActive == 1}">待付款</div>
        <div class="order-tab-item" @click="show(2)" :class="{ active: isActive == 2}">待发货</div>
        <div class="order-tab-item" @click="show(4)" :class="{ active: isActive == 4}">待收货</div>
        <div class="order-tab-item" @click="show(5)" :class="{ active: isActive == 5}">已完成</div>
        <div class="order-tab-item" @click="show(6)" :class="{ active: isActive == 6}">退款/售后</div>
      </div>
    </div>
    <div class="order-content-wrapper" ref="orderWrapper">
      <div class="order-content-container">
        <!-- <p class="aaa"></p> -->
        <!-- <div class="order-list" v-if="showGoods" v-for="item in list" v-cloak> -->
  <!--         <div class="order-list-one">
            <div class="order-list-one-item">商城自营</div>
            <div class="order-list-one-item payment-status"></div>
          </div> -->
          <!-- <div class="order-list-two" v-for="goods in item.orderInfoList">
            <p class="order-list-static">{{goods.status | record}}</p>
            <div class="order-list-commodity">
              <div class="commodity-img"><img :src="goods.productInfo.images[0]" alt=""></div>
              <div class="commodity-info">
                <div class="commodity-description">{{goods.productInfo.productName}}</div>
                <div class="commodity-price">
                  <p>￥{{goods.amount}}</p>
                  <p>x{{goods.count}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="order-list-three">
            <span>共{{item.orderInfoList.length}}件商品</span><span>合计：￥<span>{{item.payAmount}}</span></span>
          </div>
          <div class="order-list-four">
            <span class="order-btn" @click="cancel(item.payNo)">取消订单</span>
            <span class="order-btn" @click="nowPay(item.payNo)">立即付款</span>
          </div>
        </div> -->
        <!-- ========================单个显示模板 ===========================-->
         <div class="order-list" v-for="goods in list" v-cloak>
          <!-- <div class="order-list-one">
            <div class="order-list-one-item">商城自营</div>
            <div class="order-list-one-item payment-status"></div>
          </div> -->
          <div class="order-list-two">
            <p class="order-list-static">{{goods.status | record}}</p>
            <div class="order-list-commodity" @click="orderDetail(goods.orderNo)">
              <div class="commodity-img"><img :src="goods.productInfo.images[0]" alt=""></div>
              <div class="commodity-info">
                <div class="commodity-description">{{goods.productInfo.productName}}
                  <p><span v-for="attr in goods.productInfo.attributes" v-if="goods.productInfo.attributes.length>0">{{attr.name}}</span></p>
                </div>
                <div class="commodity-price">
                  <p>￥{{goods.productInfo.price}}</p>
                  <p>x{{goods.count}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="order-list-three">
            <span>总折扣:{{goods.backAmount+goods.commissionAmount}}</span>
            <span>共{{goods.count}}件商品</span><span>合计：￥<span>{{goods.amount}}</span></span>
          </div>
          <div class="order-list-four">
            <span class="order-btn" @click="cancel(goods.orderNo)" v-if="goods.status == 1">取消订单</span>
            <span class="order-btn" @click="nowPay(goods.orderNo)" v-if="goods.status == 1">立即付款</span>
            <span class="order-btn" @click="backMoney(goods)" v-if="goods.status == 2">申请退款</span>
            <span class="order-btn" @click="fast(goods.orderNo)" v-if="goods.status == 2">提醒发货</span>
            <span class="order-btn" @click="seewl(goods.orderNo)" v-if="goods.status == 4 || goods.status == 5">查看物流</span>
            <span class="order-btn" @click="okgoods(goods.orderNo)" v-if="goods.status == 4">确认收货</span>
            <span class="order-btn" @click="cancel(goods.orderNo)" v-if="goods.status == 5 ||goods.status == 39 || goods.status == 7 ">删除订单</span>
          </div>
        </div>
        
        <!-- ========================单个显示模板 ===========================-->

      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from '../../axios/axios'
  import Vheader from '../../components/header'
  import BScroll from 'better-scroll'

  export default {
    data() {
      return {
        isActive:0,
        list:{},
        list1:{},
        showGoods:true,
        p:0,
      };
    },
    created() {

    },
    mounted() {
      this.scroll = new BScroll(this.$refs.tabWrapper, {
          scrollX: true,
          click: true
        });
      this.show(0)
      // console.log(this.state[1]) 
    },
    methods: {
      show: function(id){
        var that=this;
        if(id==0 || id==1){
          that.showGoods=true
          console.log(that.showGoods)
        }else{
          that.showGoods=false
          console.log(that.showGoods)
        }
        that.isActive=id;
         var data = JSON.stringify({
          "actionName": "queryListPage",
          "controllerName": "orderPay",
          "data": [{
            "status": id
          },1,
            5]
        });
         console.log('00000000')
        axios.post({
          data: data,
          callback(res) {
            console.log(res.data.data.data)

            // if(that.showGoods){
              that.list=res.data.data.data;
            // }else{
              that.list1=res.data.data.data;
            // }
            that.$nextTick(()=>{
              that._initScroll();
            })
          }
        })
      },
      _initScroll: function () {
        if(!this.orderScroll){
          this.orderScroll = new BScroll(this.$refs.orderWrapper, {
            click: true,
          })
        }else{
          this.scroll.refresh();
        }
      },
      cancel: function(id){
        console.log(id);
        $('.aaa').html(this.p)
        var that=this;
         var data = JSON.stringify({
          "actionName": "cancelOrder",
          "controllerName": "orderInfo",
          "data": [{
            "orderInfoList": [{
              "orderNo": id
            }]
          }]
        });
        axios.post({
          data: data,
          callback(res) {
            console.log(res.data)
          }
        })
      },
      nowPay: function(id){
        console.log(id);
        var that=this;
         var data = JSON.stringify({
          "actionName": "againOrder",
          "controllerName": "orderPay",
          "data": [{
            "orderInfoList": [{
              "orderNo": id
            }],
            "paySource": "wap",
            "payType": "alipay"
          }]
        });
        axios.post({
          data: data,
          callback(res) {
            console.log(res.data)
            $('.play').html(res.data.data.order)
          }
        })
      },
      backMoney: function(goods){
        // console.log(goods)
        sessionStorage.setItem('backMessage',JSON.stringify(goods));
        this.$router.push('/backAmount');
      },
      fast: function(id){
        alert('提醒发货')
      },
      seewl: function(id){
        this.$router.push('/whereGoods');
      },
      okgoods: function(id){
        var data = JSON.stringify({
          "actionName": "confirmGetGoods",
          "controllerName": "orderInfo",
          "data": [id]
        });
        axios.post({
          data: data,
          callback(res) {
            console.log(res.data)
          }
        })
      },
      orderDetail: function(id){
        this.$router.push({path:'/orderDetail',query:{id:id}});
        // sessionStorage.setItem('orderdetail',JSON.stringify(goods))
      }
    },
    filters: {
      record: function (type) {
        var state={1:'待支付',2:'待发货',4:'待收货',5:'待评价',6:'完成',7:'取消订单',33:'退款待审核',34:'退款审核失败',38:'退款审核中',39:'退款完成',45:'退货待审核',46:'退货审核中',47:'退款中',48:'退货完成',49:'退货完成',50:'退货失败',84:'删除订单'}
        return state[type]
      }
    },
    components: {Vheader}
  };
</script>

<style type="text/scss" lang="scss">
  .order-tab-wrapper {
    width: 100vw;
    height: 44px;
    position: fixed;
    top: 44px;
    background-color: #FFFFFF;
    /*overflow-x: auto;*/
    overflow: hidden;
    .order-tab {
      width: 120%;
      height: 44px;
      display: flex;
      border-top: solid 1px #f5f5f5;
      border-bottom: solid 1px #f5f5f5;
      box-sizing: border-box;
      .order-tab-item {
        width: 20%;
        text-align: center;
        line-height: 44px;
      }
      .order-tab-item.active{
        color: #c24334;
      }
      .order-tab-item.active:after{
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        position: relative;
        top:-3px;
        background-color: #c24334;
      }
    }
  }
  .order-content-wrapper{
    width: 100%;
    height: calc(100% - 88px);
    position: absolute;
    top:88px;
    overflow: hidden;
    .order-content-container{
      width: 100%;
      margin-top: 5px;
      .order-list{
        width: 100%;
        background-color: #FFFFFF;
        margin-bottom: 5px;
        .order-list-one{
          width: 100%;
          height: 35px;
          line-height: 35px;
          border-bottom: solid 1px #f5f5f5;
          padding: 0 10px;
          display: flex;
          box-sizing: border-box;
          .order-list-one-item:first-child{
            flex: 6;
          }
          .order-list-one-item:last-child{
            flex: 4;
            text-align: right;
          }
          .order-list-one-item.payment-status{
            color: #bd1518;
          }
        }
        .order-list-two{
          width: 100%;
          border-bottom: solid 1px #f5f5f5;
          box-sizing: border-box;
          .order-list-static{
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: right;
            padding-right: 16px;
            color: #c24334;
            border-bottom: solid 1px #f5f5f5;
            box-sizing: border-box;
          }
          .order-list-commodity{
            width: 100%;
            height: 120px;
            padding: 5px 10px;
            background-color: #FFFFFF;
            display: flex;
            /*border-bottom: solid 1px #f5f5f5;*/
            box-sizing: border-box;
            .commodity-img{
              flex: 3;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .commodity-info{
              flex: 7;
              display: flex;
              .commodity-description{
                flex: 8;
                padding-left: 10px;
                box-sizing: border-box;
              }
              .commodity-price{
                flex: 2;
                text-align: right;
                p:first-child{
                  font-size: 14px;
                  line-height:50px;
                }
                p:last-child{
                  font-size: 12px;
                  color: #bababa;
                  line-height:50px;
                }
              }
            }
          }
        }
        .order-list-three{
          width: 100%;
          height: 35px;
          text-align: right;
          line-height: 35px;
          padding: 0 10px;
          border-bottom: solid 1px #f5f5f5;
          box-sizing: border-box;
          font-size: 12px;
          span:first-child{
            padding-right: 10px;
          }
          span:last-child{
            span{
              font-size: 15px;
              font-weight: 300;
            }
          }
        }
        .order-list-four{
          width: 100%;
          height: 50px;
          background-color: #FFFFFF;
          padding: 11.5px 10px;
          text-align: right;
          box-sizing: border-box;
          .order-btn{
            padding: 3px 6px;
            border-radius: 20px;
            border: solid 1px #c36a68;
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>
